<template>
  <view class="box">
    <view class="paybox">
      <image class="pay" src="@/static/images/icon_popup.png"></image>
    </view>
    <view class="text">充电宝检测中({{ value }}%)</view>
  </view>
</template>

<script setup>
import { checkOrderis } from '@/api/my';
import { jump } from '@/utils/tool';

// 响应式变量
const popupStatuText = ref('正在检测柜机中充电宝');
const fail = ref(false); // 显示失败图标
const success = ref(false); // 是否显示成功图片
const value = ref(0); // 进度条
let interval = null; // 进度条对象
const orderId = ref(0);
const deviceId = ref(0);

// 停止进度条
const start = () => {
  interval = setInterval(() => {
    value.value += 1;
    if (value.value === 98) {
      stop();
    }
  }, 50);
};

// 完成进度条
const complete = () => {
  value.value = 100;
  success.value = true;
  popupStatuText.value = '检测成功';
  stop();
};

// 开始
const stop = () => {
  if (interval !== null) {
    clearInterval(interval);
    interval = null;
  }
};

// 失败
const failFunction = () => {
  value.value = 0;
  fail.value = true;
  success.value = false;
  popupStatuText.value = '检测失败';
  stop();
};

// 弹出充电宝
const check = (orderId, deviceId) => {
  checkOrderis(orderId, deviceId)
    .then((res) => {
      if (!res || res.code !== 200) {
        failFunction();
        return;
      } else if (res.code === 200 && res.data === true) {
        uni.setStorageSync('check', '200');
      } else if (res.code === 200 && res.data === false) {
        uni.setStorageSync('check', 'check');
      }
      complete();
      jump('/pages/orderdetails/orderdetails?id=' + orderId);
    })
    .catch(() => {
      failFunction();
    });
};

/**
 * 生命周期函数--页面加载
 */
onLoad((options) => {
  console.log('options', options);
  orderId.value = options.orderId || 0;
  deviceId.value = options.deviceId || 0;
  // 进度条开始
  start();
  // 弹出充电宝
  check(orderId.value, deviceId.value);
});

/**
 * 生命周期函数--页面销毁
 */
onUnmounted(() => {
  stop();
});
</script>

<style lang="scss" scoped>
.box {
  background-color: #fff;
}
.paybox {
  display: flex;
  justify-content: center;
  margin-top: 230rpx;
  width: 750rpx;
  height: 322rpx;
}
.pay {
  width: 350rpx;
  height: 350rpx;
}
.text {
  margin-top: 20rpx;
  font-size: 28rpx;
  font-weight: bold;
  color: #212121;
  text-align: center;
}
</style>
